<!-- 商家销量统计的横向柱状图 -->
<template>
  <div class="com-container">
    <div class="com-chart" ref="RefsSeller"></div>
  </div>
</template>

<script >
import { mapState } from 'vuex'
import { getThemeValue } from '@/utils/theme_utils'
import { getDataJson } from '@/api/index.js';
export default {
  components: {},
  computed: {
    ...mapState(['theme']),
    totalPage(){
       //每5个元素一页
      return this.allDataList.length % 5 === 0 ? this.allDataList.length / 5 : this.allDataList.length / 5
    },
    //实际展示的数据
    showData(){
      const start = (this.currentPage - 1) * 5;
      const end = this.currentPage * 5;
      return this.allDataList.slice(start,end)
    }
  },
  props: {},
  watch: {
        theme () {
            console.log('主题切换了')
            this.chartInstance.dispose() // 销毁当前的图表
            this.initChart() // 重新以最新的主题名称初始化图表对象
            this.screenAdapter() // 完成屏幕的适配
            this.updateChart() // 更新图表的展示
        }
    },
  data () {
    return {
      chartInstance:null,
      allDataList:[],//服务器返回的数据
      currentPage:1,//当前页数
      // totalPage:0,//一共多少页
      timerID:null,//定时器容器
    }
  },
  created(){
    this.$WebSocket.registerCallBack('sellerData',this.getData)
  },
  mounted(){
    this.initChart();
    // this.getData(); 取消这一步
    // 通过socket通信,来传递需要获取的数据
    this.$WebSocket.send({
        action:'getData',
        socketType:'sellerData',
        chartName:'seller',
        value:""
    })
    window.addEventListener('resize',this.screenAdapter);
    //在页面加载完成时，主动调用一下
    this.screenAdapter()
  },
  destroyed(){
    this.handleClearInterval()
    window.removeEventListener('resize',this.screenAdapter);
    this.$WebSocket.unRegisterCallBack('sellerData')
  },
  methods: {
    //初始化 echarts 实例对象
    initChart(){
      const _this = this;
      this.chartInstance = this.$Echarts.init(this.$refs.RefsSeller,this.theme);
      // 对图表初始化配置的控制
      const initOptions = {
        title:{
          text:'| 商家销售统计',//主标题

          top:20,
          left:20
        },
        grid:{
          top:'20%',
          left:'3%',
          right:'6%',
          bottom:'3%',
          containLabel:true,//距离包含坐标轴上的文字 ，如果设置为 true  yAxis类目轴 会 产生效果
        },
        tooltip:{
          trigger:'axis', //axis 鼠标划入轴上，内容显示，并显示一个竖线
          axisPointer:{
            type:'line',
            z:0,//层级
            lineStyle:{
              color:'#2D3443'
            }
          },
        },
        //数值轴
        xAxis:{
          type:'value',
        },
        //类目轴
        yAxis:{
          type:'category',
        },
        series:[
          {
            type:'bar',
            label:{
              show:true,
              position:'right',//看配置，还有很多
              textStyle:{ // 设置文字颜色样式
                color:'#FFF'
              },
            },
            itemStyle:{
              /**
               * 配置颜色渐变 
               * 1、指明颜色渐变的方向
               * 2、指明不同百分比之下的颜色值
               * LinearGradient(x1,y1,x2,y2,[])
               */
              color:new _this.$Echarts.graphic.LinearGradient(0,0,1,0,[{offset:0,color:'#5052EE'},{offset:1,color:'#AB6EE5'}])
              // color:{
              //   type:'linear',//线性渐变
              //   x:0, //配置渲染方向
              //   y:0, //配置渲染方向
              //   x2:1, //配置渲染方向
              //   y2:0, //配置渲染方向
              //   colorStops:[
              //       {
              //           offset:0,color:'#5052EE',//0% 处 颜色为指定颜色
              //       },
              //       {
              //           offset:1,color:'#AB6EE5',//0% 处 颜色为指定颜色
              //       },
              //   ]
              // },
            }
          }
        ]
      }
      this.chartInstance.setOption(initOptions)
      //对图表对象，进行鼠标事件进行监听
      this.chartInstance.on('mouseover',(arg)=>{
        //鼠标移入事件
        console.log(`鼠标移入事件`);
        console.log(`arg`,arg);
        this.handleClearInterval()
      });
      this.chartInstance.on('mouseout',(arg)=>{
        //鼠标移出事件
        console.log(`鼠标移出事件`);
        this.startInterVal()
      });
    },
    //获取服务器的数据
    async getData(data){
      try {
        // this.allDataList = await getDataJson('seller');//
        this.allDataList = data;//
        //对数据进行排序
        this.allDataList.sort((a,b)=>{
          // return a.value - b.value;//从小到大
          return b.value - a.value;//从大到小
        })
       
        this.updateChart()
        this.startInterVal()
      } catch (error) {
        console.log(error)
      }
    },
    //更新图表
    updateChart(){
      const _this = this;
      let sellerNamesArr = this.showData.map(item=>item.name)
      let sellerValuesArr = this.showData.map(item=>item.value)
      const dataOptions = {
        //类目轴
        yAxis:{
          data:sellerNamesArr
        },
        series:[
          {
            data:sellerValuesArr

          }
        ]
      }
      this.chartInstance.setOption(dataOptions)
    },
    //定义一个定时器的方法
    startInterVal(){
      const _this = this;
      this.handleClearInterval();//事先干掉定时器
      this.timerID = setInterval(()=>{
        if(_this.currentPage >= _this.totalPage){
          _this.currentPage = 1
        }else{
          _this.currentPage++
        }
        _this.updateChart()
      },5000)
    },
     //干掉定时器
    handleClearInterval(){
      //干掉定时器
      clearInterval(this.timerID)
    },
    // 当浏览器的大小发生变化的时候，会调用方法，来完成屏幕的适配
    screenAdapter(){
      this.$nextTick(()=>{
        const titleFontSize = this.$refs.RefsSeller.offsetWidth / 100 * 3.6;
        //分辨率大小的相关配置项
        const adapterOptions = {
          title:{
            textStyle:{ //主标题 文字样式设置
              fontSize: titleFontSize,
            },
          },
          tooltip:{
            axisPointer:{
              lineStyle:{
                width:titleFontSize,
              }
            },
          },
          series:[
            {
              barWidth:titleFontSize,//柱宽度
              itemStyle:{
                barBorderRadius:[0,titleFontSize/2,titleFontSize/2,0],//柱圆角设置 
              }
            }
          ]
        }
        this.chartInstance.setOption(adapterOptions);
        //重新计算和绘制图表
        this.chartInstance.resize()
      })

    }
  }
}
</script>
<style lang='scss' scoped>
</style>